<template>
  <div class="box-info">
    <a-spin :spinning="loading">
      <div class="header">
        <span>合计: </span>
        <div>
          <span style="margin-right: 16px">货箱实重: {{ weightTotal }}</span>
          <span>材积重: {{ volumeTotal }}</span>
        </div>
      </div>
      <div class="table-wrapper">
        <vxe-table border show-overflow="title" height="100%" :data="tableData" :scroll-y="{ enabled: true, gt: 30 }">
          <vxe-column field="shipmentBoxNumber" title="系统箱号" min-width="160"></vxe-column>
          <vxe-column field="pickingBoxLength" title="货箱长度(CM)"></vxe-column>
          <vxe-column field="pickingBoxWidth" title="货箱宽度(CM)"></vxe-column>
          <vxe-column field="pickingBoxHeight" title="货箱高度(CM)"></vxe-column>
          <vxe-column field="circumference" title="周长(CM)"></vxe-column>
          <vxe-column field="pickingBoxWeight" title="货箱实重(KG)"></vxe-column>
          <vxe-column field="volumeWeight" title="材积重(KG)"> </vxe-column>
        </vxe-table>
      </div>
    </a-spin>
  </div>
</template>

<script lang="ts" setup>
import { toRefs, watch } from "vue";
import { getDetailsByIdApi } from "@/api/client/documentManagement/waybillManagement";
import InitHook from "./composables/initHook";
const props = withDefaults(
  defineProps<{
    visible: boolean;
    passData: { shipmentId: string; [propsName: string]: any };
  }>(),
  {}
);
const { passData, visible } = toRefs(props);
const { loading, tableData, weightTotal, volumeTotal } = InitHook();
const init = () => {
  loading.value = true;
  return getDetailsByIdApi(passData.value.shipmentId)
    .then((res: any) => {
      const { code, data } = res;
      if (code === 200) {
        tableData.value = data.preOrderShipmentBoxVolume || [];
      }
    })
    .finally(() => (loading.value = false));
};
init();
watch(
  () => visible.value,
  (v: boolean) => {
    if (v) init();
  }
);
</script>
<style lang="stylus" scoped>
.box-info{
    background-color: #fff;
    padding: 12px;
    .header{
        display: flex;
        justify-content: space-between;
        font-size: 16px;
        font-weight: 600;
        padding-bottom: 12px;
    }
    .table-wrapper{
        height: calc(100vh - 150px);
    }
}
</style>
